<!DOCTYPE html>
<html>
<head>
    <title>门店采购申请表</title>
    <#include "/header.html">
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <el-form :inline="true" :model="q" class="demo-form-inline" size="mini">
            <el-form-item>
                <a class="btn btn-default btn-sm" @click="reset"><i class="fa fa-refresh"></i></a>
            </el-form-item>
            <el-form-item>
                <el-input v-model="q.applyNo" placeholder="单据号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="q.sellerId" filterable placeholder="请选择门店">
                    <el-option
                            v-for="item in e.selectMDList"
                            :key="item.sellerId"
                            :label="item.sellerName"
                            :value="item.sellerId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="q.status" filterable placeholder="请选择" style="width: 120px;">
                    <el-option
                            v-for="item in e.purchaseApplyStatusEnum"
                            :key="item.id"
                            :label="item.describe"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="purchaseApplySearch">查询</el-button>
                <el-button type="primary" @click="add">新增采购申请</el-button>
            </el-form-item>
        </el-form>
        <!-- 耗材申请列表 start -->
        <el-table border stripe ref="multipleTable" :data="applyPage.tableData"  :height="applyTableHeight"
                  tooltip-effect="dark" size="mini">
            <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button  @click="audit(scope.row)" type="text" size="small">
                        <span  v-if="scope.row.status == 1">审核</span>
                        <span  v-if="scope.row.status != 1 ">查看</span>
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="applyId" label="申请ID" align="center" width="70"></el-table-column>
            <el-table-column prop="applyNo" label="单据号" align="center" width="150"></el-table-column>
            <el-table-column prop="sellerName" label="申请门店" align="center" width="180"></el-table-column>
            <el-table-column prop="totalMoney" label="总金额" header-align="center" align="right" width="80"></el-table-column>
            <el-table-column prop="tax" label="含税" align="center" :formatter="formatTax" width="65"></el-table-column>
            <el-table-column prop="status" label="状态" :formatter="formatStatus"  width="80" align="center"></el-table-column>
            <el-table-column prop="applyRemark" label="采购备注" header-align="center"></el-table-column>
            <el-table-column prop="auditRemark" label="审核备注" header-align="center"></el-table-column>
            <el-table-column prop="receiveName" label="入库人" width="80" align="center"></el-table-column>
            <el-table-column prop="receiveTime" label="入库时间" width="135" align="center"></el-table-column>
            <el-table-column prop="checkName" label="审核人" width="80" align="center"></el-table-column>
            <el-table-column prop="checkTime" label="审核时间" width="135" align="center"></el-table-column>
            <el-table-column prop="createName" label="申请人" width="80" align="center"></el-table-column>
            <el-table-column prop="createTime" label="申请时间" width="135" align="center"></el-table-column>

        </el-table>
        <div class="block text-right">
            <el-pagination
                    @size-change="applySizeChange"
                    @current-change="applyCurrentChange"
                    :current-page="1"
                    :page-sizes="[applyPage.size, 2*applyPage.size, 4*applyPage.size]"
                    :page-size="applyPage.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="applyPage.total">
            </el-pagination>
        </div>
        <!-- 耗材申请列表 end -->
    </div>
    <div v-show="!showList" class="panel panel-default">
        <el-container style="height:820px; border: 1px solid #eee">
            <!-- 耗材信息 start -->
            <el-aside width="42%" style="border-right:1px solid #c0c4cc; ">
                <el-container style="height: 100%;">
                    <el-header style="height: 40px">耗材信息</el-header>
                    <!-- 分类树 start -->
                    <el-container style="height: 100%;">
                        <el-aside width="22%" style="border-right:1px solid #eee; padding: 20px;">
                            <el-input
                                    placeholder="输入关键字查找分类"
                                    size="mini"
                                    v-model="materialCategorySearch">
                            </el-input>
                            <el-tree
                                    class="filter-tree"
                                    :data="materialCategoryList"
                                    :props="defaultProps"
                                    default-expand-all
                                    :filter-node-method="filterNode"
                                    :expand-on-click-node="false"
                                    @node-click="materialsSearch"
                                    ref="tree2">
                            </el-tree>
                        </el-aside>
                        <!-- 分类树 end -->
                        <!-- 耗材 start -->
                        <el-main>
                            <el-form :inline="true" :model="materialSearchForm" class="demo-form-inline" size="mini">
                                <el-form-item >
                                    <el-input v-model="materialSearchForm.materialName" @keyup.enter="materialsSearch" placeholder="耗材名称"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="materialsSearch">查询</el-button>
                                </el-form-item>
                            </el-form>
                            <el-table border stripe ref="multipleTable" :data="materialTableData"  style="height: 550px;"
                                      tooltip-effect="dark" size="mini">
                                <el-table-column prop="materialId" label="ID" width="50" align="center"></el-table-column>
                                <el-table-column prop="materialName" label="耗材名称" header-align="center" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="length" label="长(m)" width="60" header-align="center" header-align="center"></el-table-column>
                                <el-table-column prop="width" label="宽(m)" width="60" header-align="center" header-align="center"></el-table-column>
                                <el-table-column prop="weight" label="克重" width="60" header-align="center" header-align="center"></el-table-column>
                                <el-table-column prop="specifications" label="型号/规格" width="90" header-align="center"></el-table-column>
                                <el-table-column prop="unit" label="单位" width="45" :formatter="formatUnit" align="center"></el-table-column>
                                <el-table-column prop="categoryName" label="分类" width="70" header-align="center"></el-table-column>
                                <el-table-column label="操作" width="50" align="center">
                                    <template slot-scope="scope">
                                        <el-button @click="addMaterial(scope.row)" type="text" size="small">添加</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="block text-right">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="1"
                                        :page-sizes="[page.size, 2*page.size, 4*page.size]"
                                        :page-size="page.pageSize"
                                        :total="page.total">
                                </el-pagination>
                            </div>
                        </el-main>
                    </el-container>
                    <!-- 耗材 end -->
                </el-container>
            </el-aside>
            <!-- 耗材信息 end -->
            <!-- 采购耗材信息 start -->
            <el-main>
                <el-form ref="form" :model="purchaseApplyForm" label-width="80px" size="mini">
                    <el-table border stripe ref="multipleTable" :data="purchaseApplyForm.storePurchaseApplyDetailEntityList" style="margin-bottom: 20px;"
                              tooltip-effect="dark" size="mini">
                        <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
                        <el-table-column prop="materialId" label="耗材ID" width="60" align="center"></el-table-column>
                        <el-table-column prop="materialName" label="耗材名称" header-align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="specifications" label="型号/规格" width="100" header-align="center"></el-table-column>
                        <el-table-column prop="length" label="长" width="70" header-align="center"></el-table-column>
                        <el-table-column prop="width" label="宽" width="70" header-align="center"></el-table-column>
                        <el-table-column prop="weight" label="克重" width="60" header-align="center"></el-table-column>
                        <el-table-column prop="unit" label="单位" width="50" :formatter="formatUnit" align="center"></el-table-column>
                        <el-table-column label="数量" width="100" align="center">
                            <template slot-scope="scope">
                                <el-input type="number"
                                          v-model="scope.row.materialQuantity"
                                          size="mini"
                                          min="1"
                                          max="10000"
                                          @change="totalMoneyChange(scope.row,scope.$index)">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unitMoney" label="单价" width="60" align="center"></el-table-column>
                        <el-table-column label="总价" width="110" align="center">
                            <template slot-scope="scope">
                                <el-input type="number"
                                          v-model="scope.row.totalMoney"
                                          size="mini"
                                          min="0"
                                          max="100000"
                                          @change="totalMoneyChange(scope.row,scope.$index)">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="采购商" width="140" header-align="center">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.supplierId" filterable placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in e.materialSupplier"
                                            :key="item.msId"
                                            :label="item.msName"
                                            :value="item.msId">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="50" align="center">
                            <template slot-scope="scope">
                                <el-button @click="removePurchaseMaterials(scope.row,scope.$index)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-col :span="12">
                        <el-form-item label="采购总金额：" size="mini" label-width="120px">
                            <el-input v-model="purchaseApplyForm.storePurchaseApplyEntity.totalMoney" readonly="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否含税：" size="mini" label-width="120px" :span="12">
                            <el-select v-model="purchaseApplyForm.storePurchaseApplyEntity.tax" filterable placeholder="请选择" size="mini">
                                <el-option
                                        v-for="item in e.taxEnum"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="申请备注:" size="mini" label-width="120px">
                            <el-input type="textarea" v-model="purchaseApplyForm.storePurchaseApplyEntity.applyRemark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="text-center">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交申请</el-button>
                            <el-button @click="showList = true">返 回</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-main>
            <!-- 采购耗材信息 end -->
        </el-container>
    </div>
</div>
<!-- 采购申请审核页面 -->
<#include "/modules/purchase/storepurchaseapply_audit.html">

<script src="${request.contextPath}/statics/js/modules/purchase/storepurchaseapply.js?_${.now?long}"></script>
<style>
    .el-header{
        background-color: #ebeef5;
        color: #333;
        text-align: left;
        line-height: 40px;
        font-size: 12px;
    }
    .el-form-item__label {
        font-size: 12px;
    }
    .el-tree-node__label {
        font-size: 12px;
    }
    .el-pagination button, .el-pagination span:not([class*=suffix]) {
        font-size: 12px;
    }
    .el-table--mini td{
        padding: 0px 0px;
    }
</style>
</body>
</html>